<template>
	<view class="cardlist" v-if="cardList.length">
		<view class="cardlist_item" v-for="(item, index) in cardList" :key="index"
			:style="{'border-radius': shareValue ? '20rpx' : '0','background': background,'margin-top': index == 0 ? '' : `${marTop}rpx`}"
			@click="toDetail(item.dumid)">
			<view class="cardlist_item_info">
				<view class="cardlist_item_lefttop" v-if="shareValue">
					<image src="../../static/image/record/img_Finish.png" mode="widthFix" class="img"
						v-if="+item.dumstatus===1"></image>
					<image src="../../static/image/record/img_YouWon.png" mode="widthFix" class="img"
						v-if="+item.dumstatus===2"></image>
				</view>
				<view class="cardlist_item_left" :class="shareValue ? 'imgorder_padd' : 'imgdetail_padd'">
					<view class="cardlist_item_left_img" :class="shareValue ? 'list' : 'detail'"
						@click="imgToDetail(item.dumid)">
						<view class="cardlist_item_left_mask" v-if="!shareValue">
							<image src="../../static/image/record/img_Finish.png" mode="widthFix" class="img"
								v-if="+item.dumstatus===1"></image>
							<image src="../../static/image/record/img_YouWon.png" mode="widthFix" class="img"
								v-if="+item.dumstatus===2"></image>
						</view>
						<image :src="item.iconurl" mode="aspectFit" class="img"></image>
						<!-- <picturepack :imgurl="item.iconurl"></picturepack> -->
					</view>
				</view>
				<view class="cardlist_item_right">
					<view class="cardlist_item_right_top" :class="shareValue ? 'order_padd' : 'detail_padd'">
						<view class="cardlist_item_right_top_title" :style="{'width': shareValue ? '370rpx' : ''}"
							:class="{'ellipsis':shareValue}">
							{{ item.dealname }}
						</view>
						<view class="cardlist_item_right_top_share" v-if="shareValue" @click.stop="handleShare(item)">
							<image :src="shareIcon" mode="widthFix" class="img"></image>
						</view>
					</view>
					<view class="cardlist_item_right_main">
						<view class="cardlist_item_right_main_total">
							<view class="gray">
								{{ $t('card.issue') }}{{ item.issue }}
							</view>
						</view>
						<view class="cardlist_item_right_main_total linewidth" v-if="item.status == 1">
							<lineprogress :percent="item.remain > 0 ? (100-item.remain/item.need*100) : 100">
							</lineprogress>
						</view>
						<view class="cardlist_item_right_main_total">
							<view class="gray">
								{{ $t('card.need') }}{{ item.need }}
							</view>
							<!-- <view v-if="item.status == 1" class="mar_40 gray">
							{{ $t('card.remaining') }}
							<text class="red">
								{{ item.remain }}
							</text>
						</view> -->
						</view>
						<view class="cardlist_item_right_main_total" v-if="item.status == 1">
							<view class="gray">
								{{ $t('card.remaining') }}
								<text class="red">
									{{ item.remain }}
								</text>
							</view>
						</view>
						<view class="cardlist_item_right_main_total" v-if="shareValue">
							<view class="gray">
								{{ $t('card.numbers') }}<text class="red">{{ item.numbers }}</text>
							</view>
						</view>
						<view class="cardlist_item_right_main_total" v-if="item.dumstatus == 3 && shareValue">
							<template v-if="item.countdown != '00:00:00'">
								<view class="red">
									{{ item.has_lottery == 3 ? $t('card.endin') : $t('card.endin') }}<text class="red">
										<!-- {{ item.has_lottery == 3 ? item.endendtimein : item.lottery_stamp | countDownFilter }} -->
										{{ item.countdown }}
									</text>
								</view>
								<view class="" v-if="item.endin == 0 && item.status == 1 && item.remain != 0"
									style="height: 26rpx;"></view>
							</template>
							<!-- <template v-else>
							<view class="gray">
								{{ $t('card.fulltips')}}
								<view class="" style="height: 56rpx;"></view>
							</view>
						</template> -->
						</view>
						<view class="cardlist_item_right_main_winner"
							v-if="item.winnerdetail && item.status != 1 && !shareValue"
							@click.stop="toDiscount(item.dumnormal,item.dumid)">
							<view class="items gray" v-if="item.dumnormal == 2">
								{{ $t('card.youwon') }}
								<text class="red">
									<!-- {{ toRank(em.lucktype) }} prize | Rp{{ em.luckprice }} -->
									{{ item.word }} | {{ $currency }}{{ item.getprice }}
								</text>
							</view>
							<view class="items gray">
								{{ $t('card.winner') }}
								<text class="red">{{ item.winnerdetail.winner }}</text>
							</view>
							<view class="items gray">
								{{ $t('card.code') }}
								<text class="red">{{ item.winnerdetail.winnercode }}</text>
							</view>
							<view class="items gray">
								{{ $t('card.drawtime') }} {{ item.winnerdetail.winnertime }}
							</view>
						</view>
					</view>
				</view>
				<template v-if="shareValue">
					<view :class="item.status == 1 ? 'cardlist_item_btn' : 'cardlist_item_reunite'"
						v-if="(item.status == 1 && item.remain != 0) || (item.dumstatus == 2 && item.status !=2 && item.status !=7 && item.status !=6)">
						<view class="cardlist_btn" :class="item.status == 5 ? 'btn_size_2' :'btn_size_1'"
							@click.stop="handleNav(item.status,item.dumid)">
							<view class="">
								{{ btnTitle(item.status) }}
							</view>
							<image src="../../static/image/icon_RightArrow.png" mode="widthFix" class="img"></image>
						</view>
					</view>
				</template>
			</view>
			<view class="cardlist_item_loser" v-if="shareValue && item.auto_return == 1 && item.dumstatus == 1 && item.return_rate">
				<view class="cardlist_item_loser_strip">
					<view class="title">
						{{ $t('card.principal') }}:<text class="u-m-l-6">{{ $currency }}{{ item.return_amount}}</text>
					</view>
					<view class="title">
						{{ $t('card.ratio') }}:<text class="u-m-l-6">{{ item.return_rate}}%</text>
					</view>
				</view>
				<view class="cardlist_item_loser_strip">
					<view class="title">
						{{ $t('card.interest') }}:<text class="u-m-l-6">{{ $currency }}{{ item.return_income}}</text>
					</view>
				</view>
				<view class="cardlist_item_loser_strip">
					<view class="title">
						{{ $t('card.ltime') }}: {{ item.return_time }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		submitStyle
	} from '@/utils/config.js'
	import {
		countDown,
	} from '@/utils/utils'
	export default {
		inheritAttrs: false,
		props: {
			cardList: {
				type: Array,
				default: () => {
					return []
				}
			},
			background: {
				type: String,
				default: '#ffffff'
			},
			marTop: {
				type: [Number, String],
				default: '22'
			},
			// true列表 false详情
			shareValue: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				shareIcon: '../../static/image/record/icon_Share.png',
				customStyle: {},
				countDownList: [],
				timer: null
			}
		},
		mounted() {
			this.countDownList = this.cardList
			this.customStyle = submitStyle
			if (this.timer) {
				clearInterval(this.timer);
			}
			this.beginTimer()
		},
		filters: {
			countDownFilter(val) {
				return countDown(val)
			}
		},
		methods: {
			// 倒计时
			beginTimer() {
				this.timer = setInterval(() => {
					for (let i = 0, len = this.cardList.length; i < len; i++) {
						if (this.cardList[i].status == 1) {
							this.$forceUpdate()
							if (this.cardList[i].endin == '00:00:00') {
								clearInterval(this.timer)
							}
						}
					}
				}, 1000)
			},
			handleAppend(id) {
				this.$emit('navNext', id)
			},
			// 跳转详情页
			toDetail(id) {
				this.$emit('navToDetail', id)
			},
			// 分享
			handleShare(item) {
				this.$emit('share', item)
			},
			// 按钮文字
			btnTitle(status) {
				let title = ''
				// 1 进行中 append
				// 3 待确认 confirm
				// 6 待收货 receive
				// 5 已收货 comment
				switch (+status) {
					case 1:
						title = this.$t('card.addmore')
						break
					case 3:
						title = this.$t('order.confirm')
						break
					case 4:
					case 6:
						title = this.$t('order.receive')
						break
					case 5:
						title = this.$t('order.comment')
						break
				}
				return title
			},
			handleNav(num, id) {
				this.$emit("handleSkip", num, id)
			},
			imgToDetail(id) {
				this.$emit('imgToDetail', id)
			},
			countDownNow(val) {
				return countDown(val)
			},
			toDiscount(type, id) {
				this.$emit('navToDiscount', type, id)
			},
			// 数字转英文档次
			toRank(val) {
				let chinList = ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth', 'Seventh', 'Eighth', 'Ninth',
					'Tenth'
				]
				let sn = parseInt(val)
				if (sn <= 10) {
					return chinList[sn - 1]
				} else if (sn <= 100) {

				} else {
					// 100以后
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cardlist {
		.img {
			width: 100%;
			height: 100%;
		}

		.red {
			color: #ee5016;
		}

		.gray {
			color: #B9B9B9;
		}

		.lightblue {
			color: #228AFC;
		}

		.linewidth {
			width: 230rpx;
		}

		.mar_40 {
			margin-left: 40rpx;
		}

		.cardlist_item {
			padding-bottom: 26rpx;
			.cardlist_item_info {
				font-family: Roboto, Roboto-Bold;
				position: relative;
				display: flex;
				padding-left: 26rpx;
				// min-height: 310rpx;
				// border-radius: 20rpx;
				// height: 326rpx;
				overflow: hidden;
			}

			.cardlist_item_lefttop {
				width: 102rpx;
				height: 118rpx;
				position: absolute;
				top: -6rpx;
				left: 0;
				z-index: 99;
			}

			.imgorder_padd {
				// padding-top: 82rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.imgdetail_padd {
				// padding-top: 30rpx;
			}

			.cardlist_item_left {

				.cardlist_item_left_img {
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					// box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(142,164,212,0.50);
					overflow: hidden;
					position: relative;

					.cardlist_item_left_mask {
						width: 102rpx;
						height: 118rpx;
						position: absolute;
						top: -8rpx;
						left: 0;
						z-index: 99;
					}
				}

				.list {
					width: 154rpx;
					height: 154rpx;
				}

				.detail {
					width: 180rpx;
					height: 180rpx;
				}

			}

			.cardlist_item_right {
				margin-left: 30rpx;
				margin-bottom: 36rpx;

				.order_padd {
					padding-top: 34rpx;
				}

				.detail_padd {
					padding-top: 0;
				}

				.cardlist_item_right_top {
					display: flex;

					.cardlist_item_right_top_title {
						// width: 370rpx;
						// height: 32rpx;
						margin-right: 32rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #000000;
					}

					.ellipsis {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}

					.cardlist_item_right_top_share {
						// margin-left: 40rpx;
						width: 98rpx;
						height: 102rpx;
						position: absolute;
						top: 0;
						right: 0;
					}
				}

				.cardlist_item_right_main {

					// width: 80%;
					.cardlist_item_right_main_total {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
					}

					.cardlist_item_right_main_winner {
						width: 448rpx;
						margin-top: 24rpx;
						border-radius: 16rpx;
						background: #f5f5f5;
						padding-left: 28rpx;
						padding-bottom: 16rpx;

						.items {
							padding-top: 16rpx;
						}
					}
				}
			}

			.cardlist_item_reunite {
				position: absolute;
				bottom: 40rpx;
				right: 26rpx;
			}

			.cardlist_item_btn {
				position: absolute;
				bottom: 46rpx;
				right: 26rpx;
			}

			.btn_size_1 {
				min-width: 170rpx;
				height: 60rpx;
			}

			.btn_size_2 {
				min-width: 170rpx;
				height: 60rpx;
			}

			.cardlist_btn {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				opacity: 1;
				background: linear-gradient(115deg, #ffe44b 0%, #fea326 100%);
				border-radius: 8rpx;
				box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(255, 125, 0, 0.50) inset;
				font-size: 26rpx;
				font-family: DIN, DIN-Medium;
				font-weight: 400;
				color: #AD6701;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 6rpx;
				}
			}
			
			.cardlist_item_loser {
				margin: -20rpx 26rpx 0 26rpx;
				padding: 18rpx 22rpx 24rpx 22rpx;
				background: #FFECE5;
				border-radius: 16rpx;
				
				.cardlist_item_loser_strip {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					font-size: 28rpx;
					font-family: Roboto, Roboto-Regular;
					font-weight: 400;
					
					.title {
						margin-top: 16rpx;
						color: #bca39a;
						
						text {
							color: #FF5C5C;
						}
					}
				}
			}
		}
	}
</style>
